<template>
  <!--轮播图-->
  <head>
    <meta name="referrer" content="no-referrer" />
  </head>

  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="height: 180px"
    >
      <van-swipe-item v-for="image in swiperList" :key="image">
        <img class="swiper-img" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="city-tag" @click="navToCity()">
      <div>{{ currentCity }}</div>
      <div class="icon icon-arrow-down"></div>
    </div>
  </div>
  <!--tab标签-->
  <div>
    <van-sticky :offset-top="0" @change="stickyChange">
      <div v-if="isSticky" class="sticky-top">
        <div class="sticky-city" @click="navToCity()">
          <div>{{ currentCity }}</div>
          <div class="icon icon-arrow-down"></div>
        </div>
        <div class="title-bar">电影</div>
      </div>
      <van-tabs
        v-model:active="currentType"
        title-active-color="#ff5f16"
        @change="changeTab"
      >
        <van-tab title="正在热映"></van-tab>
        <van-tab title="即将上映"></van-tab>
      </van-tabs>
    </van-sticky>
    <div class="movie-box">
      <div
        class="movie-item"
        v-for="(item, index) in currentMovieList"
        :key="index"
      >
        <div class="movie-detail-box" @click="navToDetail(item._id)">
          <div class="movie-detail">
            <div class="preview-img">
              <img :src="item.pic" />
            </div>
            <div class="movie-info">
              <div class="movie-title">{{ item.title }}</div>
              <div>
                观众评分<span>{{ item.rating }}</span>
              </div>
              <div>主演</div>
              <div>中国大陆|120分钟</div>
            </div>
          </div>
          <div class="buy-ticket">
            <van-button plain size="small" type="primary" color="#ffaf8b"
              >购票</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--弹出框-->
  <van-popup
    v-model:show="showPopup"
    :style="{ height: '24%', width: '60%', borderRadius: '10px' }"
  >
    <div class="popup-box">
      <div class="popup-title">无法获取当前城市，请手动选择所在城市</div>
      <div class="popup-btn-box">
        <div class="pup-btn" @click="cancelNav()">取消</div>
        <div class="pup-btn" style="color: #ff5f16" @click="confirmNav()">
          确定
        </div>
      </div>
    </div>
  </van-popup>
  <!--滑动列表-->
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import router from "../router/index";
import { useStore } from "vuex";
const store = useStore();
const swiperList = [
  "https://static.maizuo.com/v5/upload/cfd02d4a04aa48727627a0678329f929.jpg",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpc.mm52t.com%2F2020%2F05%2F2020051816205496.jpg",
  "https://img2.baidu.com/it/u=3180282982,1782676084&fm=253&fmt=auto&app=138&f=JPEG?w=891&h=500",
  "https://img1.baidu.com/it/u=82278301,1939255307&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
];
let currentCity = ref("");
let currentType = ref(0);
let currentMovieList = ref(new Array());
let hotMovieList = reactive(new Array());
let comingMovieList = reactive(new Array());
let isSticky = ref(false);
let showPopup = ref(false);
onMounted(async () => {
  showPopup.value = store._state.data.hasShowTip;
  //默认进入就请求两个列表数据
  currentCity.value = store._state.data.userCity;
  const tempData = await fetch(
    "http://122.112.161.135:4000/api/movie/top250"
  ).then((data) => data.json());
  const tempData2 = await fetch(
    "http://122.112.161.135:4000/api/movie/comingSoon"
  ).then((data) => data.json());
  hotMovieList = tempData.res;
  comingMovieList = tempData2.res;
  currentMovieList.value = hotMovieList;
});
function changeTab(typeIndex) {
  currentType.value = typeIndex;
  currentMovieList.value = typeIndex == 0 ? hotMovieList : comingMovieList;
}
function stickyChange(isFixed) {
  isSticky.value = isFixed;
}
function navToCity() {
  router.push("/city");
}
function navToDetail(id) {
  router.push("/detail?id=" + id);
}
function cancelNav() {
  showPopup.value = false;
  store.commit("updateShowTipState", true);
}
function confirmNav() {
  showPopup.value = false;
  store.commit("updateShowTipState", true);
  navToCity();
}
</script>
<style>
@import "../src/assets/css/index.css";
</style>
